<template>
  <div class="mIndustry-con">
    <h2 class="mPanel-title title">
      <a href="http://localhost:8080/#/hsmarket/industry" target="_blank" class="read-more">
        领涨块
      </a>
    </h2>
    <ul class="mPanel-body mPanelUP-body clearfix">
      <li v-for="(item) in $store.state.upList" :key="item.NAME">
        <!-- 领涨li上半部分——行业 -->
        <a target="_blank" :title="item.NAME" href="http://localhost:8080/#/hsmarket/industry" class="cookie-recent-plate" :data-plate-name="item.NAME" :data-plate-id="item.PLATE_ID">
          <div class="mPanel-head mPanelUP-head">{{item.NAME}}</div>
          <div class="mPanel-percent mPanelUP-percent">{{'+'+(item.PERCENT*100).toFixed(2)+'%'}}</div>
          <div class="mPanel-foot mPanelUP-foot">
            <span class="stock-up"><i class="el-icon-top">{{item.UPNUM}}</i></span>
            <span class="stock-flat">{{item.STOCK_COUNT}}</span>
            <span class="stock-down"><i class="el-icon-bottom">{{item.DOWNNUM}}</i></span>
          </div>
          </a>
          <!-- 领涨li下半部分——领涨头股 -->
          <a target="_blank" :href="'http://localhost:8080/#/market/'+item.MAXPERCENTSTOCK.CODE">
          <div class="mPanel-stock stock_present">
              <span class="stock_present_name">{{item.MAXPERCENTSTOCK.NAME}}</span>
              <span class="stock_present_price">{{item.MAXPERCENTSTOCK.PRICE}}</span>
              <span class="stock_present_percent">{{(item.MAXPERCENTSTOCK.PERCENT*100).toFixed(2)+'%'}}</span>
          </div>
          </a>
      </li>
    </ul>

    <h2 class="mPanel-title title">
      <a href="http://localhost:8080/#/hsmarket/industry" target="_blank" class="read-more">
          领跌块
      </a>
    </h2>
    <ul class="mPanel-body mPanelDOWN-body clearfix">
      <li v-for="(item) in $store.state.downList" :key="item.NAME">
        <!-- 领涨li上半部分——行业 -->
        <a target="_blank" :title="item.NAME" href="http://localhost:8080/#/hsmarket/industry" class="cookie-recent-plate" :data-plate-name="item.NAME" :data-plate-id="item.PLATE_ID">
          <div class="mPanel-head mPanelDOWN-head">{{item.NAME}}</div>
          <div class="mPanel-percent mPanelDOWN-percent">{{(item.PERCENT*100).toFixed(2)+'%'}}</div>
          <div class="mPanel-foot mPanelDOWN-foot">
            <span class="stock-up"><i class="el-icon-top">{{item.UPNUM}}</i></span>
            <span class="stock-flat">{{item.STOCK_COUNT}}</span>
            <span class="stock-down"><i class="el-icon-bottom">{{item.DOWNNUM}}</i></span>
          </div>
        </a>
        <!-- 领涨li下半部分——领涨头股 -->
        <a target="_blank" :href="'http://localhost:8080/#/market/'+item.MINPERCENTSTOCK.CODE">
          <div class="mPanel-stock stock_present">
            <span class="stock_present_name">{{item.MINPERCENTSTOCK.NAME}}</span>
            <span class="stock_present_price">{{item.MINPERCENTSTOCK.PRICE}}</span>
            <span class="stock_present_percent">{{(item.MINPERCENTSTOCK.PERCENT*100).toFixed(2)+'%'}}</span>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  mounted:function () {
    // this.$store.dispatch('getHSMain')
    // 不可，因为setmIndustryData是同步函数，而getHSIndex是异步函数
    // this.$store.commit('setmIndustryData')
  }
}
</script>

<style>
.mPanel-body li{
  float:left;
  width:140px;
  margin:10px 4px;
  border: 1px solid #ecebeb;
  box-shadow: 1px 1px 3px #ecebeb;
  background-color: #fff;
  text-align: center;
}
.mPanel-body li a{
  color: #ee5f5b;
  display: block;
}
.mPanel-body li a .mPanel-head {
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  font-size: 14px;
}
.mPanel-body li a .mPanel-percent {
  color: #ee5f5b;
  font-size: 30px;
  font-family: Arial;
} 
.mPanel-body li a .mPanel-foot {
  line-height: 28px;
  color: #4d4d4d;
} 
.mPanel-foot .stock-up{
  color: #ee5f5b;
} 
.mPanel-foot .stock-up{
  color: #62c462;
} 
.mPanel-body li a .mPanel-foot span{
  margin:0 8px;
}
.mPanel-stock {
  height: 70px;
  background-color: #fafafa;
}
.mPanel-stock .stock_present_name {
    display: block;
    height: 40px;
    line-height: 40px;
    color: #888;
    font-size: 12px;
}
.mPanel-stock .stock_present_price, .mPanel-stock .stock_present_percent{
  /* position: absolute; */
    font-size: 14px;
    margin:0 5px;
    /* left: 25px; */
}
</style>
